import { t } from 'i18next'
import React, { useEffect, useMemo, useState } from 'react'
import { GreenSpan, RedSpan } from './style'
import Table, { ColumnProps } from '@/components/Table'
import { IPerson } from './translator'
const PageSize = 10
export const Callee = ({ namedPersons }: { namedPersons: IPerson[] }) => {
	const [pager, setPager] = useState({ total: 1, page: 1, size: PageSize })
	const [tableData, setTableData] = useState<IPerson[]>([])
	const Columns = useMemo<ColumnProps<IPerson>[]>(
		() => [
			{
				dataKey: 'personName',
				title: t('被点名人'),
				width: 340,
			},
			{
				dataKey: 'rollCallResults',
				title: t('点名结果'),
				render: (rowData, value) => {
					if (value === 1) {
						return <GreenSpan>{t('通过')}</GreenSpan>
					} else if (value === 2) {
						return <RedSpan>{t('不通过')}</RedSpan>
					} else {
						return <span>{t('无记录')}</span>
					}
				},
				width: 160,
			},
			{
				dataKey: 'remark',
				title: t('备注'),
				width: 520,
			},
		],
		[]
	)
	useEffect(() => {
		if (namedPersons && namedPersons.length > 0) {
			setPager({ ...pager, total: namedPersons.length, page: 1 })
			const list = namedPersons.slice(0, 10)
			setTableData(list)
		}
	}, [namedPersons])
	const handleChangePage = (pageIndex: number) => {
		setPager({ ...pager, page: pageIndex })
		const list = namedPersons.slice(10 * (pageIndex - 1), 10 * pageIndex)
		setTableData(list)
	}
	return (
		<Table
			height={488}
			tableDataList={tableData}
			columns={Columns}
			showOrderColumn={false}
			showSelectColumn={false}
			pager={pager}
			onPageChange={handleChangePage}
			i18n={{ order: t('序号') }}
			nodata={t('暂无数据')}
		/>
	)
}
